<template>
  <div class="pay">

    <div class="pay_main_part">
      <carnt-header :text="'订单确认'"></carnt-header>
      <!-- 用户填写信息 -->
      <section class="pay_confirm pay_user_info">
        <ul>
          <li>
            <div class="left_describe flex_box">
              <span>车</span>
              <span>牌</span>
              <span>号</span>
              <span>码</span>
              <span>:</span>
            </div>
            <div class="right_input">
              <input type="text" placeholder="请输入车牌号码" v-model="defaultCatAllInfo.LICENCE">
            </div>
          </li>
<!--           <li>
  <div class="left_describe flex_box">
    <span>联</span>
    <span>系</span>
    <span>人</span>
    <span>:</span>
  </div>
  <div class="right_input">
    <input type="text" placeholder="请输入联系人姓名" v-model="personName" maxlength="6">
  </div>
</li> -->
          <li>
            <div class="left_describe flex_box">
              <span>手</span>
              <span>机</span>
              <span>号</span>
              <span>码</span>
              <span>:</span>
            </div>
            <div class="right_input">
              <input type="text" placeholder="请输入手机号码" v-model="personPhone" maxlength="11">
            </div>
          </li>
<!--           <li>
  <div class="left_describe flex_box">
    <span>验</span>
    <span>证</span>
    <span>码</span>
    <span>:</span>
  </div>
  <div class="right_input getMsgCode">
    <input type="text" placeholder="请输入验证码" v-model="messageCode">
    <div class="getMsgCodeBtn" @click="getMessageCode">{{ btnWords }}</div>
  </div>
</li> -->
        </ul>
      </section>

      <!-- 选择门店信息 -->
      <section class="pay_confirm pay_shop_info big_top">
        <ul>
          <li>
            <div class="left_describe">
              门店:
            </div>
            <div class="right_input">
              <input type="text" :value="orderMessages.shopName" readonly="readonly">
            </div>
          </li>
          <li>
            <div class="left_describe">
              预约时间:
            </div>
            <div class="right_input">
              <input type="text" :value="orderMessages.orderTime" readonly="readonly">
            </div>
          </li>
        </ul>
      </section>
      <!-- 代金券 -->
      <section class="cash_replace big_top" @click="emitShowCashList">
        <span>{{ cashEnterWord }}</span>
        <i class="mintui mintui-back"></i>
      </section> 
      <!-- 已选钣喷部位展示 -->
      <section class="spray_parts big_top">
        <right-red-title :titleText="'极速钣喷'"></right-red-title>
        <ul class="spray_parts_list">
          <li class="flex_box" v-for="(item, index) in orderMessages.SERV_PARAMS" :key="index">
            <span>{{ item.SERV_DETAIL_NAME }}</span>
            <span>
              <del>￥{{ item.ORIGINAL_PRICE }}</del>
              <span class="imRed">￥{{ item.PRICE }}</span>
            </span>
          </li>
        </ul>
        <p class="totle_price">
          原价：￥{{ total_price }} &nbsp;共优惠：<span class="imRed">￥{{ Number(cashNubmer) + activity_total }}</span> 总计：<span class="imRed">￥{{ total_price-cashNubmer-activity_total }}</span>
        </p>
      </section>
      <!-- 支付方式选择 -->
      <section class="payway_choose big_top">
        <right-red-title :titleText="'支付方式'"></right-red-title>
        <ul class="payway_choose_list">
<!-- 浏览器用支付宝，微信用微信支付          <li class="flex_box" :class="{payActive:payWayChoose=='aliPay'}" @click="payWayChoose='aliPay'">
  <div class="pay_logo flex_box">
    <img src="../assets/img/pay/aliPayLogo.png" alt="">
    <span>&nbsp;&nbsp;支付宝</span>
  </div>
  <div class="pay_gougou">
    <i class="icon_checked icon_form_checkbox"></i>
  </div>
</li>
<li class="flex_box" :class="{payActive:payWayChoose=='wxPay'}" @click="payWayChoose='wxPay'">
  <div class="pay_logo flex_box">
    <img src="../assets/img/pay/wxLogo.png" alt="">
    <span>&nbsp;&nbsp;微信支付</span>
  </div>
  <div class="pay_gougou">
    <i class="icon_form_checkbox"></i>
  </div> -->
          <!-- </li> -->
          <li class="flex_box" :class="{payActive:!is_WX}" v-if="!is_WX">
            <div class="pay_logo flex_box">
              <img src="../assets/img/pay/aliPayLogo.png" alt="">
              <span>&nbsp;&nbsp;支付宝</span>
            </div>
            <div class="pay_gougou">
              <i class="icon_checked icon_form_checkbox"></i>
            </div>
          </li>
          <li class="flex_box" :class="{payActive:is_WX}" v-if="is_WX">
            <div class="pay_logo flex_box">
              <img src="../assets/img/pay/wxLogo.png" alt="">
              <span>&nbsp;&nbsp;微信支付</span>
            </div>
            <div class="pay_gougou">
              <i class="icon_form_checkbox"></i>
            </div>
          </li>
        </ul>
      </section>
    </div>
    <!-- 底端固定条 -->
    <footer class="bottom_fixed">
      <p>还需付:<span class="allNeedPay">￥{{ total_price-cashNubmer-activity_total }}</span><span class="reduceNub">&nbsp;&nbsp;已优惠:￥{{ Number(cashNubmer) + activity_total }}</span></p>
      <div class="goToPay" @click="beforeSettlement">确认下单</div>
    </footer>
    <!-- 优惠券 -->
    <transition name="router-fade" mode="out-in">
      <div class="cashList" v-if="showCashList" @click="showCashList = false">
      <div class="cashHeader">优惠券</div>
        <ul>

          <li v-for="(item, index) in cashData" :key="index" @click.stop="changeCash(item)" class="cashLI" :class="{cashActive:item.CASH_VOL_NO ==cashIdNow }">
            <!-- <p>{{ item.CASH_VOL_NO }}</p> -->
            <div class="cashLeft">
              <p class="hhh">{{ item.AMOUNT }}</p>
              <span>元</span>
            </div>
            <div class="cashRight">
              <p>{{ item.SUBJECT }}</p>
              <p>有效期至 {{ (new Date(item.EXP_DATE).getFullYear()) + '年' + (new Date(item.EXP_DATE).getMonth()+1) + '月' + (new Date(item.EXP_DATE).getDate()) + '日'}}</p>
              <p>{{ item.REMARK }}</p>
            </div>
            <div class="pay_gougou cash_gougou">
              <i class="icon_checked icon_form_checkbox"></i>
            </div>
          </li>

        </ul>
      </div> 
    </transition>
    <div class="yellow" v-if='showyellow' @click.stop='goCarProduct'>
      <img src="../assets/img/pay/yellowP.png" alt="" />
    </div>
    <div class="mask" v-if='showyellow' @click='cancelMask'>
      
    </div>
    <!--       ************************************        -->
    <form :action="getIp + '/CARNT/ServOrderWeb/createMulitServOrder'" name="alipay" id="alipay" method="post">
        <input type="hidden" value="" name="jsonParams" id="jsonParams">
    </form>
    <!-- {{ cashData }} -->

  </div>
</template>

<script>
import carntHeader from './commonParts/CarntHeader';
import rightRedTitle from './commonParts/RightRedTitle';
import { MessageBox, Indicator } from 'mint-ui';
//import { mapGetters } from 'vuex'
import { getCookie, setCookie } from '../assets/js/cookie'
// COMP_ID ，总价 ，shopName，SERV_DETAIL_NAME（逗号隔开），createMulitServOrder接口的ORDER_NO
/*上一步数据格式
{
    "USER_ID": "223681",
    "COMP_ID": "G264002",
    "SCHEDULE_DETAIL_ID": 375916,
    "shopName": "广汽丰田兆方店",
    "orderTime": "2017-04-22",
    "SERV_PARAMS": [{
            "ORIGINAL_PRICE": "618",
            "PRICE": "492",
            "POSITION": "A",
            "SERV_DETAIL_ID": 13068,
            "SERV_DETAIL_NAME": "A-车顶",
            "SECOND_CLASS": 151,
            "SUPP_DIS_VOL": 1
        }, {
            "ORIGINAL_PRICE": "618",
            "PRICE": "492",
            "POSITION": "F",
            "SERV_DETAIL_ID": 13073,
            "SERV_DETAIL_NAME": "F-前车门右侧",
            "SECOND_CLASS": 156,
            "SUPP_DIS_VOL": 1
        }]
}
*/
export default {
  name: 'pay',
  // 数据
  data () {
    return {
      msg: '支付',
      carLicense: '',// 车牌
      personName: '',// 联系人姓名
      personPhone: getCookie('userName'),// 手机号
      messageCode: '',// 短信验证码

      orderMessages:'',// 选择的部位信息
      cashData:[],// 优惠券信息（总）
      cashIdNow:'',//所选优惠券id
      showCashList:false,// 优惠券列表是否显示
      cashNubmer:0,//优惠金额
      cashEnterWord:'代金券',// 代金券入口文字
      canUseCash:'',// 是否可用代金券
      showyellow:false   //是否显示小黄人弹窗
    }
  },
  // 计算
  computed: {
    getIp () {
      //return "http://192.168.0.123:9088";
      return this.$store.state.ip;
    },
    // 活动优惠价格
    activity_total () {
      // alert(JSON.parse(localStorage.getItem('orderMessage')).paint_total )
      return +JSON.parse(localStorage.getItem('orderMessage')).paint_total ;
    },
    // 未优惠前总价
    total_price () {
      var total = 0;
      for (var i = 0; i < this.orderMessages.SERV_PARAMS.length; i++) {
        total += Number(this.orderMessages.SERV_PARAMS[i].PRICE)
      }
      return total;
    },
    // 是否在微信环境下
    is_WX () {
      var ua = navigator.userAgent.toLowerCase();  
      if(ua.match(/MicroMessenger/i)=="micromessenger") {  
          return true;  
      } else {  
          return false;  
      }  
    }
  },
  // 创建
  created () {
    if(sessionStorage.getItem('reload')){
      sessionStorage.removeItem('reload');
    }else{
      sessionStorage.setItem('reload',1);
      location.reload();
      return;
    }
    //登录判断
    if ( !!!getCookie("loginkey") && !!!getCookie("userName") ) {
      location.href = this.getIp + '/CARNT/jsp/pay/index.html';
    }
    // 获取微信config
    var timestamp,nonceStr,signature,appId,that = this;
    this.$http.post(this.getIp + '/CARNT/WeChat/getConfig.action',{'url' : window.location.href},{emulateJSON:true})
    .then(function(res){
      //console.log(res.body)
      var data = res.body;
      timestamp = data.timestamp;
      nonceStr =  data.nonceStr;
      signature = data.signature;
      appId = data.appId;
      // console.log(timestamp,nonceStr,signature,appId)
      wx.config({
          debug : false, // 开启调试模式,false调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId : appId, // 必填，公众号的唯一标识
          timestamp : timestamp, // 必填，生成签名的时间戳
          nonceStr : nonceStr, // 必填，生成签名的随机串
          signature : signature,// 必填，签名，见附录1
          jsApiList : [ 'onMenuShareTimeline', 'onMenuShareAppMessage','chooseWXPay', 'showOptionMenu' ]
      });
      that.getMessageBefore();// wx.config后再获取上一步的订单信息
    });
    
    this.canUseCash = localStorage.getItem('canUseCash');// 获取是否可用代金券信息
    this.defaultCatAllInfo = JSON.parse( localStorage.getItem("defaultCatAllInfo") );
    if (!!!localStorage.getItem("orderMessage")) {// 订单信息为空
      MessageBox('提示', '订单信息不存在').then(action => {
        location.href = this.getIp + "/CARNT/jsp/pay/indexM.html";
      }); 
    } else {
      this.orderMessages = JSON.parse(localStorage.getItem("orderMessage"));
      console.log('orderMessage订单信息', JSON.parse(localStorage.getItem("orderMessage")) );
    }
    

  },
  // 方法
  methods: {
    // 获取上一步的订单信息
    getMessageBefore () {

      if (this.canUseCash == 1) {// 可用代金券

        // 授权回来已有订单信息
        if ( !!sessionStorage.getItem('WX_order_info') && sessionStorage.getItem('WX_order_info') != '' ) {
          var get_WX_order_info = JSON.parse(sessionStorage.getItem('WX_order_info'));/*
          'WX_user_write_name':this.personName,//session 保存需用户填写的联系人姓名 ，若需要微信授权回来自动填上
          'WX_cash_word':this.cashEnterWord,// 优惠券按钮文字
          'WX_cash_number':this.cashNubmer// 显示的优惠券金额*/
          this.personName = get_WX_order_info.WX_user_write_name;
          this.cashEnterWord = get_WX_order_info.WX_cash_word;
          this.cashNubmer = get_WX_order_info.WX_cash_number;
          this.defaultCatAllInfo.LICENCE = get_WX_order_info.WX_carPai_number;
          this.personPhone = get_WX_order_info.WX_phone_number;
          // 直接结算
          this.Settlement();
        }else{
          this.getCashFirst();// 获得代金券信息
        }

      }else if (this.canUseCash == 0) {// 不可用代金券

        this.cashEnterWord = '代金券（不可用）';
        
      }
    },
    // 获得首屏的代金券信息，计算默认优惠金额 设置默认优惠券id
    getCashFirst () {

      ////////////
      var serv = [];
      for (let i = 0; i < this.orderMessages.SERV_PARAMS.length; i++) {
        let thisData = {
          "SERV_ID": this.orderMessages.SERV_PARAMS[i].SERV_DETAIL_ID,// 部位ID
          "QUANTITY": "1"//,"MARK": "1"
        }
        serv.push(thisData);
      }
      console.log('SERV_PARAMS',serv)
      var cashDataT = {
        USER_ID:this.orderMessages.USER_ID,
        COMP_ID:this.orderMessages.COMP_ID,//订单所属的商店编号
        USED_CASH_VOL_NO:'',
        SERV_PARAMS:serv
      }
      Indicator.open();
      this.$http.post(this.getIp + "/CARNT/CashVolumeWeb/getUserAvailableCashVol",{jsonParams:JSON.stringify(cashDataT)},{emulateJSON:true})
      .then(function (res) {
        var data = res.body;
        // console.info('TEST',data)

        if (data.STATUS_CODE == 1) {
          Indicator.close();
          this.cashData = data.RESULT_DATA;
          this.cashIdNow = data.CASH_VOL_NO;
          this.cashNubmer = data.ON_SALE_PRICE;
          for (var i = 0; i < data.RESULT_DATA.length; i++) {
            if (data.RESULT_DATA[i].CASH_VOL_NO == data.CASH_VOL_NO) {
              this.cashEnterWord = data.RESULT_DATA[i].REMARK;
            }
          }
        }else{

        }
      }) 
    },
    // 优惠券切换
    changeCash (info) {
      if ( info.USABLE_PRICE <= this.total_price ) {//金额是否满足所点优惠券
        this.cashNubmer = info.AMOUNT;//修改所选优惠券金额
        this.cashIdNow = info.CASH_VOL_NO;//修改所选优惠券id
        this.cashEnterWord = info.REMARK;
        this.showCashList = false;// 关闭优惠券列表
        //alert( this.cashIdNow);
      }
    },
    // 优惠券列表显示触发
    emitShowCashList () {
      if ( !!sessionStorage.getItem('WX_order_info') && sessionStorage.getItem('WX_order_info') != '' ) {
        MessageBox('提示','当前订单已生成，请先完成支付');
        return;
      }
      if (!this.cashData.length) return;
      if (this.canUseCash == 1) {// 可用代金券
        this.showCashList = !this.showCashList;
      }
      /*if (this.cashData.length == 0 || this.canUseCash == 0) {// 没有代金券 || 活动禁用代金券
        return;
      } else {
        this.showCashList = !this.showCashList;
      }*/
    },
    // 结算之前
    beforeSettlement () {
      //车牌正则
      function isLicenseNo(str) {
        var result = false;
        var express = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
        if (str.length == 7){
          result = express.test(str);
        }
        return result;
      }
      //手机正则
      function isPhoneNumber (nub) {
        var myreg =/^1[3578]\d{9}$/; 
        if(!myreg.test(nub)){ 
            return false; 
        } 
        return true;
      } 
      // 不为空验证
      if (this.defaultCatAllInfo.LICENCE === '') {
        MessageBox('提示', '车牌号码不能为空');
        return;
      } 
/*      if (this.personName === '') {
        MessageBox('提示', '联系人不能为空');
        return;
      } */
      if (this.personPhone === '') {
        MessageBox('提示', '手机号码不能为空');
        return;
      } 
      // 格式验证
      if (!isLicenseNo(this.defaultCatAllInfo.LICENCE)) {
        MessageBox('提示', '车牌号码格式有误');
        return;
      }
      if (!isPhoneNumber(this.personPhone)) {
        MessageBox('提示', '手机号码格式有误');
        return;
      }
      // 信息验证通过
      this.Settlement();
    },
    // 结算---------------------------------------------------------------------------------------------------------
    Settlement () {
      // this.test1()
      // 生成数据
      var get_WX_order_info;
      var carINFO = JSON.parse(localStorage.getItem('defaultCatAllInfo'));
      var postData = {
        "USER_ID":this.orderMessages.USER_ID,
        "PAY_WAY": '',
        "CAR_BRAND_NAME":carINFO.BRAND + '_' + carINFO.SET + '_'  + carINFO.MODEL,
        "CAR_NUMBER":carINFO.LICENCE,//车牌
        "ORDER_LIST":[{
          "COMP_ID":this.orderMessages.COMP_ID,// 商户
          "SCHD_ID":this.orderMessages.SCHEDULE_DETAIL_ID,// 分时
          "CASH_VOL_NO":this.cashIdNow,// 代金券
          "SERV_PARAMS":[]// 钣喷项目
        }]
      };
      for (let i = 0; i < this.orderMessages.SERV_PARAMS.length; i++) {
        
        let thisData = {
          "SERV_ID": this.orderMessages.SERV_PARAMS[i].SERV_DETAIL_ID,// 部位ID
          "QUANTITY": "1",
          "MARK": "1"
        }

        postData.ORDER_LIST[0].SERV_PARAMS.push(thisData);
        // console.log(postData.ORDER_LIST[0].SERV_PARAMS)
      }
      console.log(postData);

      if(!this.is_WX){
      // 支付宝
      postData.PAY_WAY = "1";
      document.getElementById('jsonParams').value = JSON.stringify(postData);
      // console.log('postData',postData);return
      // console.log(JSON.stringify(postData));
      document.getElementById('alipay').submit();
      }else{

        // 已有订单信息 跳过 直接支付
        if ( !!sessionStorage.getItem('WX_order_info') && sessionStorage.getItem('WX_order_info') != '' ) {

          //this.$nextTick(function(){
            //alert('已有订单')
            get_WX_order_info = JSON.parse(sessionStorage.getItem('WX_order_info'));
            //alert(get_WX_order_info.WX_order_id)

            this.WX_PAY ( get_WX_order_info.WX_order_id, Number(get_WX_order_info.WX_total_fee), get_WX_order_info.WX_order_body );
          //})


        }else{
          // 微信支付
          postData.PAY_WAY = "2";
          this.$http.post(
              this.getIp + "/CARNT/ServOrderWeb/createMulitServOrder",{jsonParams:JSON.stringify(postData)},{emulateJSON:true}
          )
          .then
          (
            function(res){
              console.log('x',res.body)
              console.log(res.body.STATUS_CODE);
              console.log(JSON.stringify(res.body));
              let data  = res.body;
              if (data.STATUS_CODE == 1) {
                if(data.PAYMENT_STATUS==1){//如果支付金额为零时代表该订单已经支付，直接跳转到订单页(待服务的订单)
                    Indicator.close();
                    window.location.href = that.getIp + "/CARNT/jsp/pay/indexM.html#/order/1";
                    return;
                }
                  // WX支付  --- （交易流水号/订单号、TOTAL_FEE单位分、BODY）
                this.WX_PAY(data.TRADE_NO, Number(data.TOTAL_FEE)/100, data.BODY);

                // sessionStorage 保存微信订单信息(解决重复下单)
                var WX_order_info = {
                  'WX_order_id':data.TRADE_NO,
                  'WX_total_fee':Number(data.TOTAL_FEE)/100,
                  'WX_order_body':data.BODY,
                  'WX_user_write_name':this.personName,//session 保存需用户填写的联系人姓名 ，若需要微信授权回来自动填上
                  'WX_cash_word':this.cashEnterWord,// 优惠券按钮文字
                  'WX_cash_number':this.cashNubmer,// 显示的优惠券金额
                  'WX_carPai_number':this.defaultCatAllInfo.LICENCE,// 车牌
                  'WX_phone_number':this.personPhone// 手机号
                }
                sessionStorage.setItem('WX_order_info',JSON.stringify(WX_order_info));
                
              } else if (data.STATUS_CODE == 89){
                Indicator.close();
                MessageBox.alert(data.RESULT_MSG);
              }
              
            },
            function(res){

            }
          )
        }


      }
 

    },
    goCarProduct(){
      this.showyellow=false;
      window.location.href = this.getIp + "/CARNT/jsp/pay/indexM.html#/shopDetail/701220";
    },
    cancelMask(){
      this.showyellow=false;
      window.location.href = this.getIp + "/CARNT/jsp/pay/indexM.html#/order/1";
    },
    //wx支付
    WX_PAY (trade_no,total_fee,body) {
      var that = this;
      console.log(trade_no,total_fee,body)
      var url = window.location.href;
      var augstr = trade_no+','+total_fee+','+body;
      var json = {
        'returnUrl': url,
        'paystr':augstr
      };
      this.$http.post(this.getIp + "/CARNT/WeChat/getOrder.action",json,{emulateJSON:true})
      .then
      (
        function(res){
          let data  = res.body;
          console.log(data)
          if (data.CODE == 0) {
            window.location.href = that.getIp + '/CARNT/WeChat/OAuth.action';
          }
          if (data.CODE == 1) {
            /*$.hideIndicator()
            payjson.PAYSTR = [trade_no,total_fee,body];//把授权后的订单信息存起来，方便再次取用
            localStorage.setItem('PAYJSON',JSON.stringify(payjson))*/

            wx.chooseWXPay({
              timestamp: data.timestamp, //支付签名时间戳
              nonceStr: data.noncestr, //支付签名随机串，不长于 32 位
              package: "prepay_id=" + data.prepayid, //统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
              signType: 'MD5', //签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
              paySign: data.sign, //支付签名
              success: function(res) {
                switch (res.errMsg) {
                  case 'chooseWXPay:cancel':
                    // 清空保存的订单信息
                    localStorage.setItem('WX_order_info','');
                    MessageBox('提示', '取消支付！');
                    break;
                  case 'chooseWXPay:fail':
                    alert('支付失败！（' + res.err_desc + '）');
                    break;
                  case 'chooseWXPay:ok':
                    // 清空保存的订单信息
                    sessionStorage.setItem('WX_order_info','');
                    if(new Date().getTime()<new Date('2017/10/31 24:00:00').getTime()&&total_fee>=500){
                      that.showyellow=true;
                    }else{
                      MessageBox('提示', '支付成功！');
                      window.location.href = that.getIp + "/CARNT/jsp/pay/indexM.html#/order/1";
                    }
                    break;
                  default:
                    //alert(JSON.stringify(res));
                    break;
                }
              },
              cancel:function(res){
                alert('支付取消');
              }
            });

          }
        },
        function(res){

        }
      )
    }
  },

  // 渲染
  mounted () {

  },
  // 销毁前
  beforeDestory () {

  },

  // 子组件
  components: {
    carntHeader,
    rightRedTitle
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
/*from App.vue*/
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    tap-highlight-color: rgba(0,0,0,0);
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td, embed, object {
    padding: 0;
    margin: 0; 
    -ms-tap-highlight-color: transparent;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body{
  background: #e6e9e8;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
    fieldset, img, abbr {
    border: 0;
}
address, caption, cite, code, dfn, em, 
h1, h2, h3, h4, h5, h6, strong, th, var {
    font-weight: normal;
    font-style: normal;
}
ul {
    list-style: none;
}
caption, th {
    text-align: left;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 1.0em;
}
q:before, q:after {
    content: ”;
}
a, ins {
    text-decoration: none;
}
body{
  max-width:750px;
  overflow-x: hidden;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

/*from App.vue*/

.pay{
  position: absolute;
  left: 0;
  top: 0;
  width:7.5rem;
  height:100%;
  overflow: hidden;
  font-size:.3rem;
}
.mask{
  position: fixed;
  top: 0;
  bottom: 0;
  left:0;
  right: 0;
  background: rgba(0,0,0,.3);
  z-index: 9999;
}
.yellow{
  width: 5.15rem;
  height: 5.18rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -2.575rem;
  margin-top: -2.59rem;
  z-index: 10000;
  img{
    width: 5.15rem;
    height: 5.18rem;
  }
  
}
.pay_main_part{
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:1rem;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
}
.big_top{
  border-top:.15rem solid #ececec;
}
.imRed{
  color:#fe0000;
}
/* 两端对齐 */
.flex_box{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.pay_confirm{
   ul{
      padding:0 .3rem;
      li{
        height:.85rem;
        border-bottom:1px solid #dbdbdb;
        &:last-child{
          border-bottom:0px;
        }
      }
    }
  .left_describe{
    width:1.45rem;
    float:left;
    height:100%;

    line-height:.85rem;
  }
  .right_input{
    width:6.50rem;
    padding-left:1.65rem;
    height:100%;
    input{
      border:0;
      outline:none;
      height:100%;
      font-size:.3rem;
      width:5rem;
    }
  }
}

/* 用户填写信息 */
.pay_user_info{
  background:#fff;
  &:after{
    content:'';
    display:block;
    height:.1rem;
    background:url(../assets/img/pay/postOffice.png);
    background-size: auto .1rem;
  }
  .getMsgCode{
    position: relative;
    .getMsgCodeBtn{
      position: absolute;
      right:-.45rem;
      top:50%;
      height:.56rem;
      line-height:.5rem;
      color:#db1b22;
      border:1px solid #db1b22;
      border-radius:.05rem;
      padding:.03rem .05rem;
      margin-top:-.28rem;
      cursor: pointer;
      min-width:1.62rem;
      text-align:center;
    }
  }
}
/* 选择门店信息 */
.pay_shop_info{
  background:#fff;
}

/* 代金券 */
.cash_replace{
  background:#fff;
  padding: 0 .3rem;
  height:.85rem;
  line-height:.85rem;
  color:#666;
  i{
    font-size: .3rem;
    float: right;
    transform: rotate(180deg);
    color:#666;
  }
}

/* 已选钣喷部位展示 */
.spray_parts{
  background:#fff;
  .spray_parts_list{
    padding: .12rem .3rem .18rem .3rem;
    border-bottom: 1px solid #dbdbdb;
    li{
      height:.65rem;
      line-height:.65rem;
      font-size:.28rem;
      position: relative;
      &:before{
        content:'';
        display:block;
        position: absolute;
        top:50%;
        left:-.18rem;
        width:.1rem;
        margin-top:-.05rem;
        height:.1rem;
        border-radius:50%;
        background:#fe0000;
      }
      del{
        color:#a09d9d;
      }
    }
  }
  p.totle_price{
    line-height:.65rem;
    text-align:right;
    padding: 0 .3rem;
    font-size:.25rem;
  }
}

/* 支付方式选择 */
.payway_choose{
  background:#fff;
  margin-bottom:1rem;
  .payway_choose_list{
    .payActive{
      .icon_form_checkbox{
        background: #e42e3b!important;
      }
    }
    padding:0 .3rem;
    li{
      height:.9rem;
      border-bottom: 1px solid #dbdbdb;
      &:last-child{
        border-bottom: 0px;
      }
      .pay_logo{
        img{
          width:.6rem;
        }

      }

    }
  }
}
      .pay_gougou{
        i.icon_form_checkbox{
          width:.43rem;
          height:.43rem;
          display:block;
          border-radius:50%;
          position: relative;
          background:#dfdede;
          &:after{
            content:'';
            width:.32rem;
            height:.32rem;
            position: absolute;
            left:50%;
            top:50%;
            margin:-.16rem 0 0 -.16rem;
            display:block;
            background:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20x%3D'0px'%20y%3D'0px'%20viewBox%3D'0%200%2012%209'%20xml%3Aspace%3D'preserve'%3E%3Cpolygon%20fill%3D'%23ffffff'%20points%3D'12%2C0.7%2011.3%2C0%203.9%2C7.4%200.7%2C4.2%200%2C4.9%203.9%2C8.8%203.9%2C8.8%203.9%2C8.8%20'%2F%3E%3C%2Fsvg%3E");
            background-size: .32rem .32rem;
          }
        }

      }
/* 底端固定条 */
.bottom_fixed{
  height: 1rem;
  color: #fff;
  width: 7.5rem;
  background: #2b2b2b;
  position: absolute;
  line-height:1rem;
  bottom: 0;
  z-index: 11;
  >p{
    padding-left:.2rem;
    .allNeedPay{
      
    }
    .reduceNub{
      color:#cfcfcf;
      font-size:.22rem;
    }
  }
  .goToPay{
    height:100%;
    width: 2.5rem;
    background:#e42e3b;
    position: absolute;
    right: 0;
    top: 0;
    text-align: center;
  }
}
.cashList{
  position: fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:rgba(255,255,255,1);
  z-index:20;
  overflow-y: scroll;
  ul{
    max-width:7.5rem;
    li.cashLI{
      position: relative;
      padding:.15rem;
      border-top:1px solid #ddd;
      div.cashLeft{
        width:1.8rem;
        height:1.07rem;
        float:left;
        background:url(../assets/img/pay/cashSpray.png) no-repeat;
        background-size:1.8rem 1.07rem;
        text-align:center;
        line-height:1.07rem;
        color:#fff;
        position: relative;
        p.hhh{
          font-size:.50rem;
        }
        span{
          font-size:.22rem;
          position: absolute;
          bottom:0;
          right:.1rem;
          line-height:.4rem;
        }

      }
      div.cashRight{
        margin-left:1.8rem;
        padding-left: .1rem;
        font-size:.25rem;
        line-height:.38rem;
      }
    }
  }
}
/* 优惠券头部 */
.cashHeader{
  color: #fff;
  height: .8rem;
  background: #e42e3b;
  font-size: .32rem;
  line-height: .8rem;
  width: 7.5rem;
  text-align:center;
  padding: 0 .1rem;
}
.router-fade-enter-active, .router-fade-leave-active {
    transition: opacity .3s;
}
.router-fade-enter, .router-fade-leave-active {
    opacity: 0;
}
/* 优惠券勾勾 */
.cash_gougou{
  position: absolute;
  top:50%;
  right:.2rem;
  transform: translateY(-50%);
}
.cashActive{
  .icon_form_checkbox{
    background: #e42e3b!important;
  }
}
.mint-indicator-spin{
  display: inherit!important;
}
</style>
